<template>
  <div class="all-originals">
    <div class="original-today-first">
      <div class="content">
        <ul class="title">
          <li>年份</li>
          <li>规格</li>
          <li>出厂价</li>
          <li>到港完税价</li>
          <li>库存</li>
        </ul>
        <a class="all-info" v-for="(original, index) of originals" :key="index" :href="url+'/goods_'+original.id+'.htm'">
          <p class="en-name">{{original.name}}</p>
          <p>{{original.fee}}</p>
          <ul class="detail-info-item">
            <li>{{original.year}}</li>
            <li>{{original.vol}}</li>
            <li><span v-if="hasHeader">{{original.o_price}}</span><span v-else>登录可见</span></li>
            <li><span v-if="hasHeader">{{original.price}}</span><span v-else>登录可见</span></li>
            <li>{{original.inventory}}</li>
          </ul>
        </a>
        <!--<div class="more" v-if="originals.length > 3">
          <img :src="more" width="24" height="24" @click="changeShowNumber()">
        </div>-->
      </div>
    </div>
  </div>
</template>

<script>
  import more from '../assets/img/more-information.png'
  import nomore from '../assets/img/nomore-information.png'
  export default {
    name: 'original',
    props: ['hasHeader'],
    data () {
      return {
        more: more,
        nomore: nomore,
        url: 'http://www.finewest.cn',
        originals: [],
        showNumber: 3
      }
    },
    created: function () {
      this.changeOriginals()
    },
    methods: {
      changeShowNumber () {
        this.showNumber = 10
      },
      changeOriginals () {
        this.$http({
          method: 'post',
          url: this.url + '/m/goods_mz_list.htm?size=5',
          header: {},
          contentType: 'application/x-www-form-urlencoded',
          emulateJSON: true
        }).then(function (response) {
          response = JSON.parse(response.bodyText)
          this.originals = response.data
        }, function (response) {
          console.log(response)
          console.log('获取数据失败')
        })
      }
    }
  }
</script>

<style scope lang="scss">
  .original-today-first{
    background: #FFFFFF;
    .content{
      margin: 0 15px 4px;
      .title{
        border-bottom: 1px solid #e0e0e0;
        margin: 0 -15px;
        height: 34px;
        line-height: 34px;
        font-size: 0;
        li{
          display: inline-block;
          width: 20%;
          text-align: center;
          font-size: 11px;
          color: #000000;
        }
      }
      .all-info{
        display: block;
        margin: 0 -15px;
        height: 79px;
        border-bottom: 1px solid #e0e0e0;
        position: relative;
        p{
          font-size: 13px;
          color: #444444;
          margin: 0 15px;
          &.en-name{
            padding-top: 15px;
          }
        }
        .detail-info-item{
          font-size: 0;
          margin-bottom: 15px;
          li{
            display: inline-block;
            width: 20%;
            text-align: center;
            font-size: 11px;
            color: #000000;
            span{
              font-size: 11px;
              color: #000000;
            }
          }
        }
      }
      .more{
        text-align: center;
        margin: 0 -15px 4px;
      }
    }
  }
  /*.all-originals{
    background: #ffffff;
  }
  .original-table{
    width: calc(100% - 11px);
    background-color: #ffffff;
    text-align: center;
    margin-bottom: 4px;
    padding-bottom: 10px;
    tr{
      th{
        height: 30px;
        font-weight: normal;
        font-size: 10px;
        color: #000000;
      }
      td{
        font-size: 10px;
        line-height: 21px;
        span{
          font-size: 10px;
          line-height: 21px;
        }
        a{
          font-size: 10px;
        }
      }
      td.product{
        font-size: 10px;
        line-height: 15px;
        color: #000000;
        text-align: center;
        padding: 5px 11px 0;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        margin-bottom: 5px;
      }
      .products{
        width: 60%;
      }
    }
  }*/
</style>
